<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/timeall.css">
    <link rel="stylesheet" href="../../layui/css/formSelects-v4.css">
    <title>单位时间总表</title>
    <style>
        .xunDel{
            position: relative;
            padding: 0!important;
        }
        .delp{
            width: 160px!important;
            padding: 0!important;
        }
        .dels{
            position: absolute;
            height: 100%;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            width: 210px!important;
        }
        .dels div{
            text-align: center;
            height: 100%!important;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dels1{
            width: 55%!important;
            border-right: 1px solid #343434!important;
        }
        .dels2{
            width: 40%!important;
        }

    </style>
</head>
<body class="all">
    <form class="top layui-form">
        <div class="top_left">
            <div class="sels layui-form">
                <span>日期：</span>
                <div class="layui-inline" style="margin-right: 10px;">
                    <input type="text" name="stars"  placeholder="选择日期" class="layui-input" id="t1">
                </div>
                <span>~</span>
                <div class="layui-inline" style="margin-left: 10px;">
                    <input type="text" name="ends" placeholder="选择日期" class="layui-input" id="t2">
                </div>
            </div>
            <div class="sels layui-form">
                <span class="span">项目选择：</span>
                <div class="layui-input-inline">
                    <select id="prt" xm-select="prt" xm-select-show-count="1" name="prts" class="valid">

                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" lay-submit="" lay-filter="seach" class="layui-btn">搜索</button>
            <button type="button" onclick="exports()" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出</button>
        </div>
    </form>
    <div id="timeAll" class="tabs">
        <table id="timeA">
            <tr class="tr1" style="font-weight: bold">
                <td rowspan="2">科目</td>
                <td rowspan="2">填报部门</td>
                <td rowspan="2" colspan="2">分类</td>
                <td v-for="(item1, idx1) in arrList" class="delp" colspan="2">{{item1.newproject}}</td>
            </tr>
            <tr>
                <td v-for="(item2, idx2) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">金额（元）</div>
                        <div class="dels2">占比</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">企业基本利率产值（不含税）</td>
                <td v-for="(item3, idx3) in arrList" colspan="2">{{item3.qiye_jiben}}</td>
            </tr>
            <tr>
                <td rowspan="12">变动费不含税</td>
                <td>材料部</td>
                <td>直接费</td>
                <td>材料款</td>
                <td colspan="2" v-for="(item, idx) in arrList" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.zhi_cai_money}}</div>
                        <div class="dels2">{{item.zhi_cai_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>工程部</td>
                <td>直接费</td>
                <td>机械费</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.zhi_jixie_money}}</div>
                        <div class="dels2">{{item.zhi_jixie_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>工程部</td>
                <td>直接费</td>
                <td>人工</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.zhi_ren_money}}</div>
                        <div class="dels2">{{item.zhi_ren_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>安全部</td>
                <td>措施费</td>
                <td>材料</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.an_cai_money}}</div>
                        <div class="dels2">{{item.an_cai_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>安全部</td>
                <td>措施费</td>
                <td>人工</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.an_ren_money}}</div>
                        <div class="dels2">{{item.an_ren_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>安全部</td>
                <td>措施费</td>
                <td>机械费</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.an_jixie_money}}</div>
                        <div class="dels2">{{item.an_jixie_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>安全部</td>
                <td>措施费</td>
                <td>临时设施-材料</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.an_lin_money}}</div>
                        <div class="dels2">{{item.an_lin_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>安全部</td>
                <td>措施费</td>
                <td>文化宣传-材料</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.an_wen_money}}</div>
                        <div class="dels2">{{item.an_wen_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>工程部</td>
                <td>专项措施费</td>
                <td>材料</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.zhuan_cai_money}}</div>
                        <div class="dels2">{{item.zhuan_cai_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>工程部</td>
                <td>专项措施费</td>
                <td>人工</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.zhuan_ren_money}}</div>
                        <div class="dels2">{{item.zhuan_ren_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>工程部</td>
                <td>专项措施费</td>
                <td>机械费</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.zhuan_jixie_money}}</div>
                        <div class="dels2">{{item.zhuan_jixie_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>财务</td>
                <td>附加税</td>
                <td>附加税</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.fujia_money}}</div>
                        <div class="dels2">{{item.fujia_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td>小计</td>
                <td></td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.bian_total}}</div>
                        <div class="dels2">{{item.bian_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">边界利润</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.bianjie_money}}</div>
                        <div class="dels2">{{item.bianjie_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td rowspan="12">固定费</td>
                <td>财务</td>
                <td>项目管理人员工资</td>
                <td></td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.xiangmu_money}}</div>
                        <div class="dels2">{{item.xiangmu_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>财务</td>
                <td>社保费</td>
                <td></td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.shebao_money}}</div>
                        <div class="dels2">{{item.shebao_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>财务</td>
                <td>固定资产摊销</td>
                <td></td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.fixed_money}}</div>
                        <div class="dels2">{{item.fixed_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>财务</td>
                <td>其他费用</td>
                <td>办公费</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.other_bangong}}</div>
                        <div class="dels2">{{item.other_bangong_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>财务</td>
                <td>其他费用</td>
                <td>差旅费</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.other_chailv}}</div>
                        <div class="dels2">{{item.other_chailv_fee}}%</div>
                    </div>
                </td>

            </tr>
            <tr>
                <td>财务</td>
                <td>其他费用</td>
                <td>车辆使用费</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.other_che}}</div>
                        <div class="dels2">{{item.other_che_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>财务</td>
                <td>其他费用</td>
                <td>其他</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.other_other}}</div>
                        <div class="dels2">{{item.other_other_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>项目负责人</td>
                <td>经营管理费</td>
                <td>1P</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.business_one}}</div>
                        <div class="dels2">{{item.business_one_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>项目负责人</td>
                <td>经营管理费</td>
                <td>2P</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.business_two}}</div>
                        <div class="dels2">{{item.business_two_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>项目负责人</td>
                <td>经营管理费</td>
                <td>3P</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.business_three}}</div>
                        <div class="dels2">{{item.business_three_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>项目负责人</td>
                <td>经营管理费</td>
                <td>4P</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.business_four}}</div>
                        <div class="dels2">{{item.business_four_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>小计</td>
                <td></td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.gu_total}}</div>
                        <div class="dels2">{{item.gu_total_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">经营利润</td>
                <td v-for="(item, idx) in arrList" colspan="2" class="xunDel">
                    <div class="dels">
                        <div class="dels1">{{item.jingying_money}}</div>
                        <div class="dels2">{{item.jingying_fee}}%</div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="4">管理人员人数</td>
                <td v-for="(item12, index) in arrList" colspan="2">{{item12.guanli_num}}</td>
            </tr>
            <tr>
                <td colspan="4">人.日劳动生产力</td>
                <td v-for="(item12, index) in arrList" colspan="2">{{item12.people_day_money}}</td>
            </tr>
        </table>
    </div>
    <div id="demo8"></div>
</body>
</html>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../../layui/layui.all.js"></script>
<script type="text/javascript" src="../../js/vue.js"></script>
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/excel.js"></script>
<script type="text/javascript" src="../../js/common.js"></script>
<script src="../../layui/formSelects-v4.js"></script>
<script>
    var vm = new Vue({
        el: '#timeAll',
        data: {
            token: '',
            project_id: '',
            arr: [],//项目列表
            ids:'',
            arrList:[],//数据
            permissions:''
        },
        created: function () {
            this.arr = JSON.parse(sessionStorage.getItem('project'));
            this.project_id = sessionStorage.getItem('projectopt');
            this.initData();
        },
        mounted:function () {

        },
        methods: {
            initData:function () {
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                $.when(PUATTRBUTE.REQUESTFUN('api/Change/timeindex').done(function(res){
                    layer.close(load);
                    if(res.code == 1){
                        vm.arrList = res.data;
                    }else{
                        if(res.msg == "暂无权限"){
                            vm.permissions= 1 ;
                        }
                        layer.msg(res.msg, {time: 1000, icon:2});
                    }
                }))
            }
        }
    });
    layui.use(['form', 'laydate', 'jquery'], function () {
        var form = layui.form,
            laydate = layui.laydate;
            formSelects = layui.formSelects;
        laydate.render({
            elem: '#t1' //指定元素
        });
        laydate.render({
            elem: '#t2' //指定元素
        });
        var arrs = vm.arr;
        for (var i in arrs) {// 遍历数据赋值给二级列表的内容
            var $content = $('<option value="' + arrs[i].id + '">' + arrs[i].name + '</option>');
            $('#prt').append($content);
        }
        layui.formSelects.render();
        form.on("submit(seach)",function(data){
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            });
            var obj = {
                star: data.field.stars,
                end: data.field.ends,
                project_id: data.field.prts
            };
            $.when(PUATTRBUTE.REQUESTFUN('api/Change/timeindex', obj).done(function(res){
                layer.close(load);
                if(res.code == 1){
                    layer.msg(res.msg, {time: 1000, icon:1});
                    vm.arrList = res.data;
                }else{
                    vm.arrList = [];
                    layer.msg(res.msg, {time: 1000, icon:2});
                }
            }))
        })
    })
    //导出
    function exports() {
        if(vm.permissions == 1){
            layer.alert("抱歉，您没有此权限！");
        }else {
            var tableHtml = $('#timeA');
            $(tableHtml).css({
                'border':'1px solid #d5d5d2',
                'text-align':'center',
                'border-collapse':'collapse',
            });
            $(tableHtml).find('tr td').css({
                'text-align':'center',
                'border':'1px solid #d5d5d2',
                'line-height':'30px',
                'padding':'0px 10px',
                'min-width':'100px'
            });
            var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
            $('.table-btn-group').append(urlA);
            urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
            urlA.download = "单位时间总表.xls";
            urlA.click();
        }
    }
</script>
